<template>
	<view class="app-information-search" :style="[AppSkinVar]">
		<view class="app-information-search__top fixed-top bg-white e-p-l-20 e-p-r-20">
			<e-search v-model="keyword" :showAction="false" height="72rpx" @search="handleRefresh()" @custom="handleRefresh()"></e-search>
		</view>
		<view class="e-p-l-20 e-p-r-20">
			<information-item :info="item" v-for="(item, index) in list" :key="item.id"></information-item>
			<empty v-if="isEmpty"></empty>
			<load-more v-else :showLoad="showLoad"></load-more>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useQueryPage } from '@/common/hooks';
import { getInformationList } from '@/common/request/api';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import informationItem from './child/item.vue'

const keyword = ref('');
const requestParams = computed(() => {
	return {
		name: keyword.value
	};
});

const { isEmpty, showLoad, list, handleQueryPage, handleRefresh } = useQueryPage({
	api: getInformationList,
	option: {
		params: requestParams,
		responseKey: 'data.rows',
		totalKey: 'data.total'
	}
});

const getImgs = (thumbnailPic: string) => (thumbnailPic?.split?.(',') || [])[0];

onReachBottom(() => {
	handleQueryPage();
});
</script>

<style lang="scss" scoped>
@include appBem_b(information-search) {
	padding-top: 102rpx;
	@include appBem_e(top) {
		height: 102rpx;
	}
}
</style>
